<template>
    <view class="credit-page">
        <!-- 抵扣额明细列表 -->
        <view class="record-list">
            <view class="record-list-header">
                <view class="list-title">抵扣额明细</view>
                <view class="list-tab">
                    <text class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">全部</text>
                    <text class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">支出</text>
                    <text class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">收入</text>
                </view>
            </view>
            <!-- 内容区域 -->
            <view v-if="records.length > 0" class="record-item" v-for="(item, index) in records" :key="index">
                <view class="item-left">
                    <text class="record-type">{{ item.title }} {{item.start_time}}{{ item.start_name }}-{{ item.end_name }}</text>
                    <text class="record-time">{{ item.created_at }}</text>
                </view>
                <view class="item-right" :class="{ add: item.amount > 0, reduce: item.amount < 0 }">
                    <text class="record-value" :class="{ add: item.amount > 0, reduce: item.amount < 0 }">{{
                        item.amount > 0 ? "+" : "" }}{{ item.amount }}</text>
                </view>
            </view>
            <empty-data  v-if="records.length == 0" defaultText="暂无数据"/>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            size: 20,
            currentTab: 0, // 当前选中的tab
            records: [
                // {
                //     type: "乘客室友优惠券-05-13 19:00成都-巴中",
                //     value: 1.0,
                //     time: "2023-05-01",
                // },
                // {
                //     type: "抵扣信息费-05-13 19:00成都-巴中",
                //     value: 0.5,
                //     time: "2023-05-02",
                // },
                // {
                //     type: "乘客室友优惠券-05-13 19:00成都-巴中",
                //     value: 0.1,
                //     time: "2023-05-05",
                // },
                // {
                //     type: "乘客室友优惠券-05-13 19:00成都-巴中",
                //     value: 0.1,
                //     time: "2023-05-08",
                // },
                // {
                //     type: "乘客室友优惠券-05-13 19:00成都-巴中",
                //     value: -0.2,
                //     time: "2023-05-10",
                // },
                // {
                //     type: "乘客室友优惠券-05-13 19:00成都-巴中",
                //     value: -0.2,
                //     time: "2023-05-12",
                // },
            ],
        };
    },
    onShow: function () {

    },
    onLoad() {
        this.getDeductionLog()
    },
    methods: {
        async getDeductionLog() {
            try {
                let params = {
                    page: this.page,
                    size: this.size,
                    type: this.currentTab //  0:全部 1:支出 2:收入
                }
                const data = await this.$http.get('/h5/user/wallet/deductionLog', params)
                this.records = data.data.list

            } catch (error) {
                
            }
        },
        // 点击切换tab
        switchTab(index) {
            this.currentTab = index;
            this.page = 1
            this.getDeductionLog()
        },
        // 导航到指定页面
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
    },
};
</script>

<style scoped>
.credit-page {
    padding: 20rpx 26rpx;
}

.record-list {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 40rpx;
}

.record-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx 0;
    border-bottom: 2rpx solid #eee;
}

.list-tab text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #666666;
    line-height: 28rpx;
    padding-right: 48rpx;
}

.list-tab text:last-child {
    padding-right: 0;
}

.list-tab .active {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #0b1f20;
    line-height: 28rpx;
}

.list-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0b1f20;
    line-height: 28rpx;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #eee;
}

.record-item:last-child {
    border-bottom: none;
}

.item-left {
    display: flex;
    flex-direction: column;
}

.record-type {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0b1f20;
    line-height: 50rpx;
}

.record-time {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #afb5be;
    line-height: 50rpx;
}

.item-right {}

.record-value {
    display: block;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 32rpx;
    color: #ff3f39;
    line-height: 50rpx;
    text-align: right;
}

.add {
    color: #00cfab;
}

.reduce {
    color: #ff3f39;
}


.swiper {
    /* flex: 1; */
    /* height: 100%; */
}

.swiper-content {
    /* height: 100%;
    box-sizing: border-box; */
}
</style>
